@hover-color: #409eff;
@size: 30px;

.burger-pagination {
  display: flex;
  flex-wrap: nowrap;

  &-num,
  &-icon,
  &-jump-num,
  &-jump-btn,
  .ellipsis {
    flex-shrink: 0;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: @size;
    height: @size;
    line-height: @size;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 0;
    margin: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      color: @hover-color;
    }
  }

  .ellipsis {
    &:hover {
      &-icon {
        display: none;
      }
    }

    &-left {
      .double-left {
        display: none;
      }

      &:hover {
        .ellipsis-icon {
          display: none;
        }

        .double-left {
          display: block;
        }
      }
    }

    &-right {
      .double-right {
        display: none;
      }

      &:hover {
        .ellipsis-icon {
          display: none;
        }

        .double-right {
          display: block;
        }
      }
    }
  }

  &-icon {
    &.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }

  &-num {
    font-weight: bold;

    &.active {
      color: @hover-color;
    }
  }

  &-jump {
    display: flex;

    &-num {
      border: 1px solid #ccc;
      box-sizing: border-box;
      width: 50px;
      outline: #fff;
      text-align: center;
      cursor: text;
      transition: all 0.2s;

      &:hover {
        color: #000;
      }

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 2px #409eff;
      }
    }

    &-btn {
      background-color: #fff;

      &:disabled {
        color: #ccc;
        cursor: not-allowed;
      }
    }
  }
}

.bg {
  .burger-pagination-num,
  .burger-pagination-icon,
  .ellipsis,
  .burger-pagination-jump-btn {
    background-color: #f0f0f0;
  }

  .burger-pagination-num {
    &.active {
      color: #fff;
      background-color: @hover-color;
    }
  }
}
